<template>
  <div class="_startSup">
    <!-- <img class="bgImg" :src="bgImg" alt /> 
    <div class="startBtn" @click="startClick"></div>
    <div class="shopImg" @click="shopImgClick"></div>
    <div class="count">已有{{supCount.successCount}}人助力成功</div>
    <van-popup v-model="popupVisible">
      商品简介
    </van-popup>-->
    <img v-show="headImg" :src="headImg" class="headImg" @load="imgLoaded" @error="imgError" />
    <img v-show="detailImg" :src="detailImg" class="detailImg" />

    <div v-show="imgLoad" class="goodsCount">
      已抢
      <span class="numColor">{{count.num}}</span>件，仅剩
      <span class="numColor">{{count.remain}}</span>件
    </div>

    <sup-bottom-bar-layout
      :num="avListMy.length"
      :state="supState"
      @seckill-click="startClick"
      @sup-click="supClick"
      @sup-list-click="supListClick"
    ></sup-bottom-bar-layout>
  </div>
</template>

<script>
import { mapActions, mapMutations } from "vuex";
import headImg1 from "@/assets/详情乳胶枕大人_01.jpg";
import headImg2 from "@/assets/详情乳胶枕小孩_01.jpg";
import headImg3 from "@/assets/详情万用毯_01.jpg";

import detailImg1 from "@/assets/直播助力产品-成人枕.jpg";
import detailImg2 from "@/assets/直播助力产品-儿童枕.jpg";
import detailImg3 from "@/assets/大号万用棉毯.jpg";

import { Popup, Slider, Button, Dialog } from "vant";
import SupBottomBarLayout from "@/components/SupBottomBarLayout";
export default {
  components: {
    [Popup.name]: Popup,
    [Slider.name]: Slider,
    [Button.name]: Button,
    SupBottomBarLayout
  },
  data() {
    return {
      headImg: "",
      detailImg: "",
      gid: 0,
      popupVisible: false,
      imgLoad: false,
      supState: 1,
      count: {
        num: 0,
        remain: 0
      }
    };
  },
  computed: {
    supCount() {
      return this.$store.state.activity.supCount;
    },
    supInfoMy() {
      return this.$store.state.activity.supInfoMy;
    },
    avListMy() {
      return this.$store.state.activity.avListMy;
    }
  },
  watch: {
    supInfoMy: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val && val.asOpenid) {
          this.supState = 2;
        }
      }
    },
    supCount: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val && val.browseCount) {
          this.$nextTick(() => {
            this.count.num = val[`goods${this.gid}Purchase`] || 0;
            this.count.remain = val[`goods${this.gid}Remain`] || 0;
          });
        }
      }
    }
  },
  created() {
    console.log(this.$route.query.gid);
    if (this.$route.query.gid) {
      let p = parseInt(this.$route.query.gid);
      this.gid = p;
      switch (p) {
        case 1: {
          this.headImg = headImg1;
          this.detailImg = detailImg1;
          break;
        }
        case 2: {
          this.headImg = headImg2;
          this.detailImg = detailImg2;
          break;
        }
        case 3: {
          this.headImg = headImg3;
          this.detailImg = detailImg3;
          break;
        }
      }
      this.$forceUpdate();
    }
  },
  methods: {
    ...mapActions({
      startSup: "activity/startSup",
      updateShareAndSup: "activity/updateShareAndSup"
    }),
    ...mapMutations({
      setSupInfoMy: "activity/setSupInfoMy"
    }),
    startClick() {
      if (
        this.$store.state.activity.enrollInfo &&
        this.$store.state.activity.enrollInfo.id
      ) {
        let info = this.$store.state.activity.enrollInfo;
        let sendData = {
          asMobile: info.phone,
          asName: info.userName,
          asAddress: info.address,
          acId: 1,
          asOpenId: this.$store.state.userId,
          asProductId: this.gid,
          helperInfo: JSON.stringify(this.$store.state.userInfo)
        };
        if (this.$store.state.shareParams.shareId) {
          this.startSup(sendData)
            .then(res => {
              console.log(res);
              if (res.code == "000000") {
                let srAsId = res.data.id;
                this.setSupInfoMy({ asOpenid: res.data.asOpenid, ...res.data });
                return this.updateShareAndSup({
                  shareId: this.$store.state.shareParams.shareId,
                  assistId: res.data.id
                });
              } else {
                return { msg: res.msg };
              }
            })
            .then(res => {
              console.log(res);
              if (res && res.code == "000000") {
                Dialog.alert({ message: "发起助力成功" }).then(() => {});
              } else {
                Dialog.alert({
                  title: "出错了~",
                  message: res.msg
                });
              }
            })
            .catch(err => {
              this.hideLoading();
              console.log(err);
            });
        } else {
          Dialog.alert({
            message: "获取分享信息失败，请重新打开页面"
          });
        }
      } else {
        this.$router.push({
          name: "fillMsg",
          query: {
            ...this.$route.query
          }
        });
      }
    },
    shopImgClick() {
      this.popupVisible = true;
    },
    imgLoaded(e) {
      this.imgLoad = true;
    },
    imgError(e) {
      Dialog({ message: "商品图片加载失败" });
    },
    supClick() {
      Dialog.alert({
        title: "温馨提示",
        message: "请于页面右上角分享助力链接~"
      });
    },
    supListClick() {
      this.$router.push({
        name: "supList",
        query: {
          ...this.$route.query
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
._startSup {
  position: relative;
  .headImg {
    width: 100vw;
  }
  .detailImg {
    width: 100vw;
  }
  .goodsCount {
    position: absolute;
    left: 20px;
    top: 620px;
    color: #828282;
    font-size: 0.12rem;
    .numColor {
      color: $font-color-primary;
    }
  }
}
</style>